<script setup>
/**
 * pageInfo:
 *   currentPage: 当前第几页，默认 1
 *   pageSize: 每页多少条，默认 5
 *   total: 一共多少条
 *   fn: 分页回调函数
 * background: 是否显示背景
 * layout: 分页功能列表
 * pageSizes: 每页多少条可选数量
 */
let parent = defineProps({
  'pageInfo': {type: Object, required: true},
  'background': {type: Boolean, required: false, default: true},
  'layout': {type: String, required: false, default: 'total, sizes, prev, pager, next, jumper'},
  'pageSizes': {type: Array, required: false, default: [1, 5, 10, 18]},
});
</script>

<template>
  <el-pagination class="my-pager"
                 :background="background"
                 :layout="layout"
                 :page-sizes="pageSizes"
                 :current-page="pageInfo['currentPage'] || 1"
                 :page-size="pageInfo['pageSize'] || 5"
                 :total="pageInfo['total']"
                 @size-change="pageSize => pageInfo['fn'](pageInfo['currentPage'], pageSize)"
                 @current-change="currentPage => pageInfo['fn'](currentPage, pageInfo['pageSize'])"/>
</template>

<style scoped lang="scss">
.my-pager {
  margin: 20px; // 外边距
  justify-content: center; // 自居中
}
</style>